<template>
	<div class="body">
		<div class="main">
			<div class="overview">
				<p>平台概况</p>
				<ul>
					<li>
						<img src="../assets/reg.png" alt="" />
						<div class="content">
							<p>注册用户量</p>
							<h4>16568</h4>
						</div>
					</li>
					<li>
						<img src="../assets/jinrong.png" alt="" />
						<div class="content">
							<p>金融机构量</p>
							<h4>11231</h4>
						</div>
					</li>
					<li>
						<img src="../assets/yinzheng.png" alt="" />
						<div class="content">
							<p>银政产品数量</p>
							<h4>16568</h4>
						</div>
					</li>
					<li>
						<img src="../assets/qita.png" alt="" />
						<div class="content">
							<p>其他产品数量</p>
							<h4>16568</h4>
						</div>
					</li>
				</ul>
			</div>
			<div class="echars">
				<div class="access">
					<p>访问量统计</p>
					<div id="main"></div>
				</div>
				<div class="apply">
					<p>申请情况统计</p>
					<div id="main1"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";

const dateList = [...Array(7).keys()].map((days) => {
	let t = new Date(Date.now() - 86400000 * days);
	let str = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
	return str;
});

type EChartsOption = echarts.EChartsOption;

onMounted(() => {
	//访问量统计
	echarts.init(document.getElementById("main")!).dispose(); //解决echarts dom已经加载的报错
	var myChart = echarts.init(document.getElementById("main")!);
	var option: EChartsOption;
	option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				label: {
					backgroundColor: "#3291ff",
				},
			},
		},
		grid: {
			left: "2%",
			right: "2%",
			bottom: "2%",
			containLabel: true,
		},
		xAxis: {
			type: "category",
			boundaryGap: true,
			data: dateList.reverse(),
		},
		yAxis: {
			type: "value",
		},
		color: ["#3291ff"],
		series: [
			{
				name: "数量",
				type: "line",
				stack: "Total",
				data: [120, 132, 101, 134, 90, 230, 210],
			},
		],
	};

	option && myChart.setOption(option);

	//访问量统计
	echarts.init(document.getElementById("main1")!).dispose(); //解决echarts dom已经加载的报错
	var myChart1 = echarts.init(document.getElementById("main1")!);
	var option1: EChartsOption;

	option1 = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				label: {
					backgroundColor: "#3291ff",
				},
			},
		},
		legend: {
			data: ["产品申请", "融资需求"],
		},
		grid: {
			left: "2%",
			right: "2%",
			bottom: "2%",
			containLabel: true,
		},
		xAxis: [
			{
				type: "category",
				name: "数量",
				boundaryGap: true,
				data: dateList,
			},
		],
		yAxis: [
			{
				type: "value",
			},
		],
		color: ["#3291ff", "#47d468"],
		series: [
			{
				name: "产品申请",
				type: "line",
				stack: "Total",
				areaStyle: {},
				emphasis: {
					focus: "series",
				},
				data: [120, 132, 101, 134, 90, 230, 210],
			},
			{
				name: "融资需求",
				type: "line",
				stack: "Total",
				areaStyle: {},
				emphasis: {
					focus: "series",
				},
				data: [120, 132, 101, 134, 90, 230, 210],
			},
		],
	};

	option1 && myChart1.setOption(option1);
});
</script>

<style scoped lang="scss">
.body {
	background-color: #f5f7fe;
	padding: 20px;
	box-sizing: border-box;
	height: calc(100% - 56px);
}
.main {
	background-color: #fff;
	height: 100%;
	width: 100%;
	box-shadow: 0 0 4px #ddd;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	.overview {
		padding: 15px 20px;
		box-sizing: border-box;
		ul {
			list-style: none;
			display: flex;
			width: 100%;
			padding: 0;
			li {
				margin-right: 20px;
				background-color: #f9f9f9;
				border-radius: 4px;
				width: 25%;
				height: 120px;
				display: flex;
				align-items: center;
				padding: 0 30px;
				box-sizing: border-box;
				img {
					width: 70px;
					height: 70px;
					margin-right: 20px;
				}
				p {
					margin: 0;
				}
				h4 {
					font-weight: bold;
					font-size: 24px;
					letter-spacing: 2px;
					margin: 0;
					margin-top: 10px;
				}
			}
			li:last-of-type {
				margin-right: 0;
			}
		}
	}
	.echars {
		display: flex;
		justify-content: space-between;
		div {
			width: 49%;
			#main {
				width: 100%;
				height: 400px;
				border: 1px solid #ddd;
				border-radius: 4px;
			}
			#main1 {
				width: 100%;
				height: 400px;
				border: 1px solid #ddd;
				border-radius: 4px;
			}
		}
	}
}
</style>
